<template>
  <div class="complaint-container">
    <van-nav-bar
      title="投诉建议"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />
    
    <div class="complaint-content">
      <van-form @submit="onSubmit">
        <!-- 投诉类型 -->
        <van-cell-group inset>
          <van-cell
            title="投诉类型"
            :value="complaintType"
            is-link
            @click="showTypePicker = true"
            required
          />
        </van-cell-group>

        <!-- 投诉内容 -->
        <van-cell-group inset class="content-group">
          <van-field
            v-model="content"
            type="textarea"
            placeholder="请详细描述您遇到的问题，我们会尽快处理"
            rows="4"
            autosize
            required
          />
        </van-cell-group>

        <!-- 图片上传 -->
        <van-cell-group inset class="upload-group">
          <div class="upload-title">问题截图（选填）</div>
          <van-uploader
            v-model="fileList"
            multiple
            :max-count="3"
            :after-read="afterRead"
          />
        </van-cell-group>

        <!-- 联系方式 -->
        <van-cell-group inset>
          <van-field
            v-model="contact"
            label="联系方式"
            placeholder="请输入您的手机号或邮箱"
            required
          />
        </van-cell-group>

        <!-- 提交按钮 -->
        <div class="submit-btn">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>

    <!-- 投诉类型选择器 -->
    <van-popup
      v-model:show="showTypePicker"
      position="bottom"
      round
      safe-area-inset-bottom
    >
      <van-picker
        show-toolbar
        title="选择投诉类型"
        :columns="complaintTypes"
        @confirm="onTypeConfirm"
        @cancel="showTypePicker = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast } from 'vant'

const router = useRouter()

// 表单数据
const complaintType = ref('')
const content = ref('')
const contact = ref('')
const fileList = ref([])

// 投诉类型选择器
const showTypePicker = ref(false)
const complaintTypes = [
  { text: '课程内容问题', values: ['课程内容问题'] },
  { text: '技术故障', values: ['技术故障'] },
  { text: '收费问题', values: ['收费问题'] },
  { text: '服务态度', values: ['服务态度'] },
  { text: '其他问题', values: ['其他问题'] }
]

// 计算属性和方法
const isFormValid = computed(() => {
  return complaintType.value && content.value && contact.value
})

const onClickLeft = () => {
  router.back()
}

const onTypeConfirm = (value) => {
  complaintType.value = value.text
  showTypePicker.value = false
}

const afterRead = async (file) => {
  try {
    // TODO: 实现文件上传
    // const formData = new FormData()
    // formData.append('file', file.file)
    // 这里应该调用实际的上传 API
    console.log('File uploaded:', file)
  } catch (error) {
    showToast('图片上传失败')
    // 从文件列表中移除上传失败的文件
    const index = fileList.value.indexOf(file)
    if (index !== -1) {
      fileList.value.splice(index, 1)
    }
  }
}

const onSubmit = async () => {
  try {
    if (!isFormValid.value) {
      showToast('请填写必填项')
      return
    }

    // TODO: 实现表单提交
    const formData = {
      type: complaintType.value,
      content: content.value,
      contact: contact.value,
      images: fileList.value.map(file => file.url || file.content)
    }

    console.log('Form submitted:', formData)
    showSuccessToast('提交成功')
    router.back()
  } catch (error) {
    console.error('Submit error:', error)
    showToast('提交失败，请稍后重试')
  }
}
</script>

<style lang="scss" scoped>
.complaint-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 32px;

  .complaint-content {
    padding: 16px;

    .van-cell-group {
      margin-bottom: 12px;
      border-radius: 8px;
    }

    .content-group {
      .van-field {
        height: auto;
      }
    }

    .upload-group {
      padding: 16px;

      .upload-title {
        margin-bottom: 12px;
        font-size: 14px;
        color: #323233;
      }
    }

    .submit-btn {
      margin-top: 24px;
      padding: 0 16px;
    }
  }
}
</style>
